<template>
	<section >
		<el-row>
		  <el-col :span="24">
			<div class="roledivision-content">
				<p>团队组建及角色划分</p>
				<p class="zhineng">各角色岗位职责:</p>
				<p class="jieshao">首席执行官(CEO)：CEO是一个团队的核心，负责提交团队作业，修改小组的名称</p>
				<p class="jieshao">首席市场官(CMO):CMO是指企业中负责市场运营工作的高级管理人员，又称作市场部经理、营销总监</p>
				<p class="jieshao">首席技术官(CTO):CTO（首席技术官）,即企业内负责技术的最高负责人</p>
				<p class="jieshao">首席财务官(CFO):CFO是企业治理结构发展到一个新阶段的必然产物。没有首席财务官的治理结构不是现代意义上完善的治理结构。</p>
				<p class="jieshao">顾问(COU):COU顾问提供的意见以独立、中立为首要</p>
				<p class="jieshao">政府及公共组织(GOV):GOV一般用于描述拥有作为美国联邦政府一个分支或机构的域名的实体</p>
			</div>			  	
		  </el-col>
		  <el-col :span="8" v-for="(el,index) in List" style="margin-top: 5px;">
		    <el-card :body-style="{ padding: '0px' }">
				<div class="seats-list">							
					<div class="head-content">
						<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='ceo'"  v-on:click="changeinfo(el,'ceo')">					
							<p v-bind:class="['radius',sel.teamRole=='ceo'?'change':'']"><span>{{sel.user.realName}}</span></p>
							<p class="test">首席执行官</p>	
						</div>
						<div v-if="teamRole[index].indexOf('ceo')=='-1'" v-on:click="changeinfo(el,'ceo')">					
							<p class="radius"><span>CEO</span></p>
							<p class="test">首席执行官</p>	
						</div>						
					</div>
					<div class="center-content clearfix">
						<div class="left-box">
							<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='cmo'" v-on:click="changeinfo(el,'cmo')">					
								<p v-bind:class="['radius',sel.teamRole=='cmo'?'change':'']"><span>{{sel.user.realName}}</span></p>
								<p class="test">首席市场官</p>	
							</div>
							<div v-if="teamRole[index].indexOf('cmo')=='-1'" v-on:click="changeinfo(el,'cmo')">					
								<p class="radius"><span>CMO</span></p>
								<p class="test">首席市场官</p>	
							</div>
							<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='cfo'" v-on:click="changeinfo(el,'cfo')">					
								<p v-bind:class="['radius',sel.teamRole=='cfo'?'change':'']"><span>{{sel.user.realName}}</span></p>
								<p class="test">首席财务官</p>	
							</div>
							<div v-if="teamRole[index].indexOf('cfo')=='-1'" v-on:click="changeinfo(el,'cfo')">					
								<p class="radius"><span>CFO</span></p>
								<p class="test">首席财务官</p>	
							</div>						
						</div>
						<div class="center-box">
							<div class="box-content"> 
<!--								<el-input v-model="input" placeholder="请填写队名"></el-input>
-->								<p>{{el.name}}</p>
							</div>
						</div>
						<div class="right-box">
							<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='cto'" v-on:click="changeinfo(el,'cto')">					
								<p v-bind:class="['radius',sel.teamRole=='cto'?'change':'']"><span>{{sel.user.realName}}</span></p>
								<p class="test">首席技术官</p>	
							</div>
							<div v-if="teamRole[index].indexOf('cto')=='-1'" v-on:click="changeinfo(el,'cto')">					
								<p class="radius"><span>CTO</span></p>
								<p class="test">首席技术官</p>	
							</div>	
							<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='cou'" v-on:click="changeinfo(el,'cou')">					
								<p v-bind:class="['radius',sel.teamRole=='cou'?'change':'']"><span>{{sel.user.realName}}</span></p>
								<p class="test">顾问</p>	
							</div>
							<div v-if="teamRole[index].indexOf('cou')=='-1'" v-on:click="changeinfo(el,'cou')">					
								<p class="radius"><span>COU</span></p>
								<p class="test">顾问</p>	
							</div>					
						</div>	
					</div>
					<div class="bottom-content">
							<div v-for="sel in el.courseStudents" v-if="sel.teamRole=='gov'" v-on:click="changeinfo(el,'gov')">					
								<p v-bind:class="['radius',sel.teamRole=='gov'?'change':'']"><span>{{sel.user.realName}}</span></p>
								<p class="test">政府及公共组织</p>	
							</div>
							<div v-if="teamRole[index].indexOf('gov')=='-1'" v-on:click="changeinfo(el,'gov')">					
								<p class="radius"><span>GOV</span></p>
								<p class="test">政府及公共组织</p>	
							</div>						
					</div>
				</div>	
		    </el-card>
		  </el-col>
		  <el-col :span="24" style="text-align: center;margin-top: 20px;">
		  		<el-button type="primary"  size="large" v-if="isOpen!=1&&$store.state.role=='teacher'" @click.native="startvisible = true">确定成员并开启沙盘推演及项目路演课程</el-button>
		  </el-col>
		</el-row>	
		<!--提示-->
		<el-dialog  title="提示" :fullscreen="false" custom-class="videodialog" width="30%"  v-model="startvisible" :close-on-click-modal="false">
			<el-form >		
				<p>确认小组分配，并把上两个课程学习阶段中未提交的作业置为0分，同时开启沙盘推演学习吗？？</p>
				<template>
					<div  style="margin-top: 20px;">
					  <el-radio class="radio" v-model="keep" label="false">是(所有学生开启沙盘推演阶段学习，同时未提交的作业置为0分)</el-radio>
					  <el-radio class="radio" v-model="keep" label="true">否(所有学生开启沙盘推演阶段学习，同时不把未提交的作业置为0分)</el-radio>						
					</div>
				</template>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="startvisible = false">取消</el-button>
				<el-button type="primary" @click.native="startInfer" >提交</el-button>
			</div>
		</el-dialog>	
		<!--查看视频界面-->		
		<!--编辑界面-->
		<el-dialog  title="成员排坐" :fullscreen="false" custom-class="videodialog" width="30%"  v-model="seatVisable" :close-on-click-modal="false">
			<el-form :model="seatmodel"  ref="seatmodel">		
				<el-form-item label="未分组成员" prop="name" label-width="150px">
					<el-tag v-for="el in residue":key="el.user.realName" v-if="!el.teamId" type="danger" style="padding: 0 20px;">
					{{el.user.realName}}
					</el-tag>

				</el-form-item>		

				<el-form-item label="选择小组成员" label-width="150px" >
				    <el-select placeholder="请选择版块儿" v-model="seatmodel.userId">
				      <el-option v-for="el in memberList" :value="el.userId" :label="el.user.realName"></el-option>
				    </el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="seatVisable = false">取消</el-button>
				<el-button type="primary" @click.native="setSeat" v-if="isOpen!=1" :loading="seatLoading">提交</el-button>
			</div>
		</el-dialog>	
		<!--查看视频界面-->		
	</section>
</template>

<script>
	import { courseTeam,coursestuseat,courseStudent,coursestartInfer,courseone} from '../../api/api';
	import { quillEditor } from 'vue-quill-editor' //调用编辑器

	//import NProgress from 'nprogress'
	export default {
		data() {
			return {
				intro:"",	
				seatVisable:false,
				seatLoading:false,
				startvisible:false,
				Type:"0",
				ID:this.$route.query.id,
				List:[],
				seatmodel:{
					teamId:"",
					teamRole:"",
					userId:""
				},
				memberList:[],
				residue:[],
				teamRole:[],		
				classname:"",
				classid:"",
				keep:"true",
				stageId:"",
				isOpen:"",
			}
		},  		
		methods: {
			getTeam:function(){	
				let params={courseId:this.ID,pageSize:10};
				var _this=this;
				_this.teamRole=[];
				courseTeam(params).then((res) => {
					_this.List=res.list;
					$.each(res.list, function(e,value) {
						var teamRole=[]
						if(value.courseStudents.length>0){
							$.each(value.courseStudents, function(i,result) {
								teamRole.push(result.teamRole)
							});							
						}
						_this.teamRole.push(teamRole)
					});
				});				
			},
			
			changeinfo:function(el,name){
				if(this.$store.state.role!='teacher'){
					return
				}
				this.seatmodel.classname=name;
				this.seatmodel.classid=el.teamId;
				this.seatVisable=true;
			},		
			getList: function (type) {
				//NProgress.start();
				var _this=this;
				_this.residue=[];
				let params={pageNum:1,pageSize:0,courseId:this.$route.query.id,isAgree:true};
				courseStudent(params).then((res) => {
					this.memberList = res.list;
					$.each(res.list,function(e,value){
						if(!value.teamId){
							_this.residue.push(value)
						}
					});
					//NProgress.done();
				});					

			},			
		    skip(link,id,row){
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        		}
		        	}
		        )
		    },			
			startInfer:function(){
					var _this=this;
					if(this.residue.length>0){
						this.$message({
							message: '不能遗留未分组成员',
							type: 'error'
						});		
						return;
					}
					var pass=0;
					var num=0;
					var CEOlist=0;
					$.each(_this.List, function(e,value) {			
						if(value.courseStudents.length>0){
							num++;
							$.each(value.courseStudents, function(r,result) {
								if(result.teamRole=='ceo'){
									CEOlist++;
								}
							});							
						}
					});
					if(num!=CEOlist){
						this.$message({
							message: '每个团队小组里面必须有ceo角色存在',
							type: 'error'
						});	
						return
					}
					var params=new URLSearchParams();
					params.append('keep',this.keep);
					params.append('courseId',this.ID);			
					coursestartInfer(params).then((r) => {
						if(!r.error){
							this.$message({
								message: '操作成功',
								type: 'success'
							});		
							this.startvisible=false;
							this.getcourseInfo()
						}else{
							this.$message({
								message: '操作失败',
								type: 'error'
							});				
						}
					})	
			},
			setSeat:function(row,type){
				this.seatLoading=true;
				this.$confirm('确认选定座位吗?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',					
					type: 'warning'
				}).then(() => {
					var params=new URLSearchParams();
					params.append('courseId',this.ID);
					params.append('teamId',this.seatmodel.classid);
					params.append('teamRole',this.seatmodel.classname);
					params.append('userId',this.seatmodel.userId);
					coursestuseat(params).then((r) => {
						if(!r.error){
							this.seatLoading=false;
							this.seatVisable=false;
							this.$message({
								message: '座位选定成功',
								type: 'success'
							});
							this.getTeam()
							this.getList()							
						}else{
							this.$message({
								message: '座位选定失败',
								type: 'error'
							});				
							this.getTeam()
						}
					})	
				}).catch((r)=>{
						this.seatLoading=false;
					})			
			
			},	
			getcourseInfo:function(){
				var params=this.$route.query.id;
				var _this=this;
				courseone(params).then((res)=>{			
					_this.stageId=res.courseStages[2].stageId;
					_this.isOpen=res.courseStages[2].isOpen;
				})
			}				
		},	
		mounted() {
			var _this =this;
			_this.$nextTick(function(){
				this.getTeam()
				this.getList();		
				_this.stageId=_this.$store.state.courseInfo.courseStages[2].stageId;
				_this.isOpen=_this.$store.state.courseInfo.courseStages[2].isOpen
			})			
		}
	};

</script>

<style scoped src='../../../static/css/all.css'>
</style>